<!--
 * @Description: 我的收藏页面组件
 * @Author: hai-27
 * @Date: 2020-02-20 17:22:56
 * @LastEditors: YaoXiaoTian
 * @LastEditTime: 2021-06-09 18:01:31
 -->
<template>
  <div>
    <Banner></Banner>
    <div class="panda">
      <el-header>
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          active-text-color="#CF975A"
          @select="handleSelect"
        >
          <el-menu-item index="0">熊猫头条</el-menu-item>
          <el-menu-item index="1">爱看熊猫</el-menu-item>
          <el-menu-item index="2">熊猫学堂</el-menu-item>
          <el-menu-item index="3">熊猫家园</el-menu-item>
        </el-menu>
      </el-header>
      <div class="list" v-if="carousel && carousel.length">
        <Headlines :carousel="carousel" />
      </div>
      <Empty v-else />
      <div class="footer">
        <el-pagination
          prev-text="上一页"
          next-text="下一页"
          background
          :current-page="pageArr[activeIndex]"
          layout="prev, pager, next"
          :total="total"
          hide-on-single-page
          @current-change="currentChange"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import Banner from "../../components/banner/index.vue";
import Empty from "../../components/Empty.vue";
import Headlines from "./components/headlines/index";
export default {
  data() {
    return {
      pandaList: [],
      activeIndex: "0",
      pageArr: [1, 1, 1, 1],
      rows: 9,
      total: 0,
    };
  },
  components: {
    Banner,
    Headlines,
    Empty,
  },
  created() {
    this.getPandaPage();
  },
  methods: {
    currentChange(current) {
      this.pageArr[this.activeIndex] = current;
      this.getCollectList();
    },
    handleSelect(key) {
      this.activeIndex = key;
      this.getPandaPage();
    },
    getPandaPage() {
      this.$http
        .fetch(this.$apiPath.getPandaPage, {
          method: "get",
          params: {
            page: this.pageArr[this.activeIndex],
            pandaType: this.activeIndex,
          },
        })
        .then((res) => {
          this.carousel = res.data.records;
          this.total = res.data.total;
        });
    },
  },
};
</script>
<style lang="less">
.panda {
  width: 1220px;
  margin: 0 auto;
  .footer {
    padding: 0;
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 33px;
    background-color: #ffffff;
    .btn-prev {
      width: 74px;
      height: 30px;
      border: 1px solid #c7c7c7;
      border-radius: 15px;
    }
    .btn-next {
      width: 74px;
      height: 30px;
      border: 1px solid #c7c7c7;
      border-radius: 15px;
      color: #999999;
    }
    .el-pager li {
      width: 30px;
      height: 30px;
      border: 1px solid #c7c7c7;
      border-radius: 15px;
      color: #999999;
    }
    .el-pager {
      .number {
        text-align: center;
        padding: 0;
      }
      //   .number:hover {
      //     color: #999999 !important;
      //   }
      li:not(.active).number:hover {
        color: #999999 !important;
      }
    }
    .el-pager li:not(.disabled).active {
      background-color: #cf975a;
    }
  }
}
</style>
